html {
    background-color: #E8E7E3;
}
* {
    margin: 0;
    padding: 0;
}
/**/
ul {
    list-style: none;
    /*display: block;*/
    /*margin-block-start: 1em;    !* 块区 起始外边距 *!*/
    /*margin-block-end: 1em;      !* 块区 结束外边距 *!*/
    /*margin-inline-start: 10px;  !* 行 起始外边距 *!*/
    /*margin-inline-end: 0px;     !* 行 结束外边距 *!*/
    /*padding-inline-start: 20px; !* 行 起始内边距 *!*/
    /*padding-inline-end: 20px;   !* 行 结束内边距 *!*/
    /*padding-block-start: 5px;   !* 块区 起始外边距 *!*/
    /*padding-block-end: 5px;     !* 块区 结束外边距*!*/
}
/*li {*/
/*    height: 30px;*/
/*    line-height: 30px;*/
/*}*/
.header-box {
    background-color: white;
    position: relative;
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
}
.header-ul li {
    float: right;
}
.main-box1 {
    /*display: block;*/
    position: relative;
    width: 1200px;
    height: 300px;
    background-color: #bfa;

    margin: 0 auto;
}
.box1-wrapper {
    position: relative;
    background-color: #E8E7E3;
}
.box1-left {
    width: 200px;
    height: 300px;
    background-color: cyan;
    float: left;
    margin-right: 10px;
}

.box1-center {
    width: 780px;
    height: 300px;
    background-color: blanchedalmond;
    float: left;
    margin-right: 10px;
}
.box1-center-img-box {
    position: relative;
}
.img-box-ul li {
    position: absolute;
    left: 0;
    right: 0;
    width: 400px;
    margin: auto;
}

.image {
    width: 400px;
    height: 300px;
}

.box1-right {
    width: 200px;
    height: 300px;
    background-color: green;
    float: left;
}





.main-box2 {
    /*display: block;*/
    position: relative;
    width: 1200px;
    height: 300px;
    background-color: #ffff00;

    margin: 0 auto;
}

.footer-box1 {
    display: block;
    width: 100%;
    height: 200px;
    background-color: crimson;
}
.footer-box2 {
    display: block;
    width: 100%;
    height: 200px;
    background-color: red;
}